<template><el-container style="height: 1000px; border: 1px solid #eee">
  <el-aside width="300px" style="background-color: rgb(238, 241, 246)" class="p-4">
    <div class="form-section-n"></div>
    
<div class="form-section">
    <div class="demo-input-suffix">
  手机号码：
  <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="inputphone">
  </el-input>
</div>
<div class="demo-input-suffix">
</div></div>

<div class="form-section">
    <div class="demo-input-suffix">
  姓名：
  <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="inputname">
  </el-input>
</div>
<div class="demo-input-suffix">
  
</div></div>
<div class="form-section">
    <p>性别：</p>

    <el-radio-group v-model="sexradio">
    <el-radio :label="1">男</el-radio>
    <el-radio :label="0">女</el-radio>
  </el-radio-group>
</div>
<div class="form-section">
  <p>是否已归档：</p>

    <el-radio-group v-model="stateradio">
    <el-radio :label="1">否</el-radio>
    <el-radio :label="2">是</el-radio>
  </el-radio-group>

  </div>
  <div class="form-section">
  <el-select v-model="value" placeholder="选择套餐">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </div>
  <div class="form-section">
  <div class="block">
    <span class="demonstration">体检时间</span>
    <el-date-picker
      v-model="datevalue"
      type="date"
      format="YYYY-MM-DDT16:00:00.000+00:00"
      value-format="YYYY-MM-DDT16:00:00.000+00:00"
      placeholder="选择日期">
    </el-date-picker>
  </div></div>
   <el-button type="primary" @click="onSubmit()">开始筛选</el-button>
   <el-button type="info" @click="onClear()">清除筛选</el-button>

  </el-aside><!--左侧结束-->
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px">

      <span style="font-size: 24px;">医生：{{ doctor.realName }}</span>
       
    </el-header>
    
    
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="orderId" label="预约编号" width="150">
        </el-table-column>
        <el-table-column prop="realName" label="姓名" width="150">
        </el-table-column>
        <el-table-column prop="orderDate" label="体检日期" width="150" :formatter="formatDate">
        </el-table-column>
        <el-table-column prop="userId" label="手机号码" width="150">
        </el-table-column>
        <el-table-column prop="hname" label="体检医院" width="150">
        </el-table-column>
        <el-table-column prop="sname" label="体检套餐" width="150">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="150" :formatter="formatState">
        </el-table-column>

        <el-table-column label="操作" width="180">
      <template #default="scope">
        <!-- 编辑按钮 -->
        <el-button 
          type="primary" 
          size="small" 
          @click="handleEdit(scope.row)"
        >{{ scope.row.state==1?"编辑":"查看" }}</el-button>
      </template>
    </el-table-column>
      </el-table>
      <el-pagination
  background
  layout="prev, pager, next"
  :total=pages v-model:current-page.sync="currpage" @current-change="getOrderList">
</el-pagination>
    </el-main>
  </el-container>
</el-container></template>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
    .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
    .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .form-section {
  margin-bottom: 32px; 
}
.form-section-n {
  margin-bottom: 128px; 
}
</style>

<script>
import { getSessionStorage,setSessionStorage } from '@/common';
import { reactive,toRefs } from 'vue';
import axios from 'axios';
import { formatter } from 'element-plus';
import { useRouter,useRoute } from 'vue-router';
  export default {
    setup(){
      const router = useRouter();
        const state=reactive({
            doctor:getSessionStorage('doctor'),
            pages:0,
            currpage:1,
            orderList:null,
            tableData:null,
            sexradio:"",
            stateradio:"",
            inputname:"",
            inputphone:"",
            options: [{
          value: '1',
          label: '男士-基础套餐'
        }, {
          value: '2',
          label: '男士-肾病检查'
        }, {
          value: '3',
          label: '男士-肝病检查'
        }, {
          value: '4',
          label: '女士-基础套餐'
        }, {
          value: '5',
          label: '女士-肾病检查'
        },{
          value: '6',
          label: '女士-肝病检查'
        }],
        value:"",
        datevalue:"",
        });
    
        function getOrderList(){
          console.log(state.currpage);
            axios.post('/api/rorderList',{"pageNumber":state.currpage,"pageSize":12,"realName":state.inputname,"userId":state.inputphone,"sex":state.sexradio,"state":state.stateradio,"smId":state.value,"orderDate":state.datevalue})
        .then(response=>{
            if(response.data.status==200){
              state.orderList=response.data.data.list;
              //console.log(state.orderList);
              state.tableData=state.orderList;
              state.pages=response.data.data.pageInfo.total;
            }
            else{
              alert(response.data.desc);
            }

        }).catch(error=>{
            console.log(error);
        })
        }

        function onSubmit(){
          console.log("性别"+state.sexradio);
          console.log("归档"+state.stateradio);
          console.log("姓名"+state.inputname);
          console.log("手机号"+state.inputphone);
          console.log("套餐"+state.value);
          console.log("时间"+state.datevalue);
          getOrderList();
        }

        function handleEdit(row){
            console.log(row);

            axios.post('/api/createReportTemplate',{"orderId":row.orderId,"smId":row.smId})
            .then(response=>{
            if(response.data.status==200){
              console.log(response.data.desc);
            }
            else{
              alert(response.data.desc);
            }
            }).catch(error=>{
            console.log(error);
            })
            setSessionStorage("orderId",row.orderId);


            router.push('/orderdetail')
        }
        function formatDate(row,column){
            return row.orderDate.substring(0,10);
        }
        function formatState(row,column){
          return row.state==1?"未归档":"已归档";
        }
        function onClear(){
          state.inputname="";
          state.inputphone="";
          state.sexradio="";
          state.stateradio="";
          state.value="";
          state.datevalue="";
        }

        getOrderList();
        return {
            ...toRefs(state),
            getOrderList,
            handleEdit,
            formatDate,
            onSubmit,
            formatState,
            onClear,
        }
    }
  };
</script>